import React, { memo, useEffect, useState } from 'react'

import { Image } from 'antd'
import { PlayCircleOutlined } from '@ant-design/icons'
import moment from 'moment'

// 导入全局评论组件
import CommentComponent from '../../../components/comment'

//  api 接口
import { getBangdanZhaiyao, getPaihangbang } from '../../../api/paihangbangApi'
// 导入常量
import { ImgError, PlaceholderImg } from '../../../constant/local-constant'
import { MusicClubTopListBox } from './style'
export default memo(function MusicClubTopList() {

  // state
  const [zhaiyao, setZhaiyao] = useState([]) // 摘要
  const [activeId, setActiveId] = useState(0) // 激活的摘要 的ID
  const [bangdanDetail, setBangdanDetail] = useState([]) // 榜单详情
  // ajax
  useEffect(() => {
    getBangdanZhaiyao().then(res => {
      setZhaiyao(res.list)
      setActiveId(res.list[0].id)
    })
    getPaihangbang(19723756).then(res => {
      setBangdanDetail(res.playlist.tracks)
    })
  }, [])


  // other handle
  // 激活的 ID 改变的时候
  const changeAactiveId = id => {
    setActiveId(id)
    getPaihangbang(activeId).then(res => {
      setBangdanDetail(res.playlist.tracks)
    })
  }

  // 处理 显示的作者
  const authorHandle = item => {
    let string = []
    item.forEach(item => string.push(item.name))
    return string.join("/")

  }
  return (
    <MusicClubTopListBox>
      <div className="wrap main" >
        <div className="left">
          <ul>
            {
              zhaiyao.map(item => {
                return (
                  <li key={item.id} className={item.id === activeId ? "active" : ""} onClick={e => { changeAactiveId(item.id) }}>
                    <Image
                      width={40}
                      height={40}
                      src={item.coverImgUrl}
                      preview={false}
                      fallback={ImgError}
                      placeholder={
                        <Image
                          preview={false}
                          width={40}
                          height={40}
                          src={PlaceholderImg}
                        />
                      }
                    />
                    <div className="info">
                      <span>{item.name}</span>
                      <i>{item.updateFrequency}</i>
                    </div>
                  </li>
                )
              })
            }
          </ul>
        </div>
        <div className="right" style={{ paddingBottom: "20px" }}>
          <div className="right_header">
            <div></div>
            <div>歌曲</div>
            <div>作者</div>
            <div>时长</div>
          </div>
          <div className="right_body">
            {
              bangdanDetail.slice(0, 25).map((item, index) => {
                return (
                  <div className="item" key={item.id}>
                    <div className={(index + 1 < 4 ? "active" : "")} style={{ fontSize: "14px" }}>{index + 1}</div>
                    <div className="item_name">
                      <Image
                        width={70}
                        height={70}
                        src={item.al.picUrl}
                        preview={false}
                        fallback={ImgError}
                        placeholder={
                          <Image
                            preview={false}
                            width={70}
                            height={70}
                            src={PlaceholderImg}
                          />
                        }
                      />
                      <div className="item_name_name">{item.name}</div>
                      <div className="anniu">
                        <PlayCircleOutlined />
                      </div>
                    </div>
                    <div className="one-txt-cut">{authorHandle(item.ar)}</div>
                    <div>{moment(item.dt).format("mm:ss")}</div>
                  </div>
                )
              })
            }
          </div>
        </div>
      </div>

      <div className="comment wrap" >
        <CommentComponent flag={1} id={activeId} />
      </div>

    </MusicClubTopListBox>
  )
})
